<template>
  <div>
    <my-header>我是list</my-header>
    <my-table :arr="list">
      <template #to>
         <tr>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </tr>
      </template>

    <template #st="{i,e}">
          <td>{{e+1}}</td>
          <td>{{i.goods_name}}</td>
          <td>{{i.goods_price}}</td>
          
          <td>
          <input
          @blur="xx(i)"
           v-if="i.inputVisible"
          style="width: 100px;"
          type="text"
          v-fous
           @keydown.esc="k"
          @keydown.enter="m(i)"
          v-model="o"
          />
          <button 
          v-else
          style="display: block;" 
          @click="rm(i)"
          class="btn btn-primary btn-sm add-tag"
        
          >+Tag</button>
            <span  class="btn btn-warning btn-sm" v-for="y in i.tags" :key="y"> {{y}} </span>
            

          </td>
          <td>
          <button class="btn btn-danger btn-sm"
          @click="add(i.id)"

          >删除</button>
          
        </td>
        
    </template>

    </my-table>
  </div>
    
 
</template>

<script>
import 'bootstrap/dist/css/bootstrap.css'
import MyHeader from '@/components/MyHeader.vue'
import MyTable from '@/components/MyTable.vue'
import axios from "axios";


axios.defaults.baseURL = "https://www.escook.cn";
export default {
  components: { MyHeader, MyTable },
  data(){
    return{
      list:[],
      o:''
    }
  },
  async created(){
   const res = await axios.get('https://www.escook.cn/api/goods')
   console.log(res.data.data);
   this.list = res.data.data
  //  this.$emit('arr',this.arr)
  },
  methods:{
    m(i){
      // (this.o)
      // this.list.tags.push(this.o)
      // console.log(this.);
      // console.log(i.tags);
      i.tags.push(this.o)
      this.o = ''
      i.inputVisible = false
    },
    k(){
      this.o=""
    },
    add(id){
      // console.log(id);
      this.list = this.list.filter(i=> i.id !== id)
    },
    rm(i){
      // console.log(i);
      i.inputVisible = true
      
    },
    xx(i){
        i.inputVisible = false
        
    }
  }
  
}
</script>

<style>
span{
  margin-left: 10px;
  font-weight: 700;
}
</style>